<template>
    <div>
        <a-button @click="popShown = true">点我弹出模态框</a-button>
        <a-modal v-model:value="popShown">
            <div
                class="c-p-m c-round-m"
                style="background-color: #fff; box-shadow: 1px 1px 10px #ccc"
            >
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-label>账号</a-label>
                        <a-input-string v-model:value="name"></a-input-string>
                    </a-control-group>
                </div>
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-label>最喜爱的水果</a-label>
                        <a-input-select v-model:value="fav" :items="favItems" />
                    </a-control-group>
                </div>
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-label color="primary">品类</a-label>
                        <a-input-tree
                            color="primary"
                            :canSelectFolder="true"
                            :items="cateItems.filter((a) => a.parentId == null)"
                            :getItemsFunc="
                                (a) =>
                                    cateItems.filter((b) => b.parentId == a.id)
                            "
                            :getIsFolderFunc="
                                (a) => cateItems.some((b) => b.parentId == a.id)
                            "
                            v-model:value="cate"
                            :getTextFunc="(a) => a.name"
                            :getValueFunc="(a) => a.id"
                            :getDisplayTextFunc="(a) => a.name"
                            popPlacement="top"
                        >
                        </a-input-tree>
                    </a-control-group>
                </div>
                <div class="c-p-v-m">
                    <a-control-group>
                        <a-badge :count="badgeCount" :dotOnly="dotOnly">
                            <a-button>按钮</a-button>
                        </a-badge>
                        <a-input-number
                            v-model:value="badgeCount"
                        ></a-input-number>
                        <a-input-check-box-single v-model:value="dotOnly">
                            <template v-slot:append>
                                <span>仅仅展示小红点</span>
                            </template>
                        </a-input-check-box-single>
                    </a-control-group>
                </div>
            </div>
        </a-modal>
        <pre
            class="language-html"
        ><code>{{ `<a-button @click="popShown = true">点我弹出模态框</a-button>
<a-modal v-model:value="popShown">
    <div
        class="c-p-m c-round-m"
        style="background-color: #fff; box-shadow: 1px 1px 10px #ccc"
    >
        <div class="c-p-v-m">
            <a-control-group>
                <a-label>账号</a-label>
                <a-input-string v-model:value="name"></a-input-string>
            </a-control-group>
        </div>
        <div class="c-p-v-m">
            <a-control-group>
                <a-label>最喜爱的水果</a-label>
                <a-input-select v-model:value="fav" :items="favItems" />
            </a-control-group>
        </div>
        <div class="c-p-v-m">
            <a-control-group>
                <a-label color="primary">品类</a-label>
                <a-input-tree
                    color="primary"
                    :canSelectFolder="true"
                    :items="cateItems.filter((a) => a.parentId == null)"
                    :getItemsFunc="
                        (a) =>
                            cateItems.filter((b) => b.parentId == a.id)
                    "
                    :getIsFolderFunc="
                        (a) => cateItems.some((b) => b.parentId == a.id)
                    "
                    v-model:value="cate"
                    :getTextFunc="(a) => a.name"
                    :getValueFunc="(a) => a.id"
                    :getDisplayTextFunc="(a) => a.name"
                    popPlacement="top"
                >
                </a-input-tree>
            </a-control-group>
        </div>
        <div class="c-p-v-m">
            <a-control-group>
                <a-badge :count="badgeCount" :dotOnly="dotOnly">
                    <a-button>按钮</a-button>
                </a-badge>
                <a-input-number
                    v-model:value="badgeCount"
                ></a-input-number>
                <a-input-check-box-single v-model:value="dotOnly">
                    <template v-slot:append>
                        <span>仅仅展示小红点</span>
                    </template>
                </a-input-check-box-single>
            </a-control-group>
        </div>
    </div>
</a-modal>` }}</code></pre>
        <pre class="language-javascript"><code>{{ `export default {
    data() {
        return {
            name: 'zhang',
            fav: null,
            favItems: [
                { text: '香蕉', value: 1 },
                { text: '苹果', value: 2 },
                { text: '梨子', value: 3 },
                { text: '葡萄', value: 4, disabled: true },
            ],
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            cate: null,
            badgeCount: 1,
            dotOnly: true,
            popShown: false,
        }
    },
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: 'zhang',
            fav: null,
            favItems: [
                { text: '香蕉', value: 1 },
                { text: '苹果', value: 2 },
                { text: '梨子', value: 3 },
                { text: '葡萄', value: 4, disabled: true },
            ],
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            cate: null,
            badgeCount: 1,
            dotOnly: true,
            popShown: false,
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'value', remark: '值，是否展示模态框', type: 'boolean', default: 'false' },
                        { name: 'clickBgToClose', remark: '是否允许点击背景关闭模态框', type: 'boolean', default: 'false' },
                        { name: 'sharp', remark: '是否允许点击键盘ESC键关闭模态框', type: 'boolean', default: 'true' },
                        { name: 'placement', remark: '模态框出现的位置', type: 'top-left | top-center | top-right | center-left | center-center | center-right | bottom-left | bottom-center | bottom-right', default: 'null' },
                    ],
                },
                {
                    name: 'emits',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'params', text: '参数' },
                    ],
                    dataList: [
                        { name: 'update:value', remark: '值发生变化', params: 'boolean' },
                    ],
                }
            ]
        }
    },
}
</script>